<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Github仓库月刊">
    <meta name="keywords" content="技术,读书,笔记,源码">
    <title>燕归来兮 | 技术周刊</title>
    <#include "common/link.ftl"/>
    <style>

        .box:hover {
            box-shadow: 0 1em 1em -0.5em rgb(0 0 0 / 10%), 0 0 0 8px rgb(0 0 0 / 2%);
        }

        .bookName {
            text-align: -webkit-center;
            text-align: center;
            margin-top: 11px;
            color: black;
        }


        @media screen and (max-width: 768px) {
            .content {
                width: 100%;
            }
        }


        @media screen and (min-width: 768px) {
            .content {
                width: 80%;
            }
        }

        .level {
            margin-top: 25px;
        }
    </style>
</head>
<body>

<section class="hero  is-medium is_blue">
    <!-- Hero head: will stick at the top -->
    <div class="hero-head">
        <#include "common/nav.ftl"/>
    </div>

    <!-- Hero content: will be in the middle -->
    <div class="hero-body">
        <div class="container has-text-centered">
            <p class="title is-size-1 mb-6">
                技术周刊
            </p>
        </div>
    </div>

    <!-- Hero footer: will stick at the bottom -->
    <div class="hero-foot">
    </div>
</section>


<#-- 文章列表 -->
<div class="is-flex is-justify-content-center mt-4">
    <div class="columns content">
        <div class="column is-four-fifths">
            <div class="columns" style="display: none">
                <div class="column">
                    <p class="notification is-warning">First column</p>
                </div>
                <div class="column">
                    <p class="notification is-info">First column</p>
                </div>
                <div class="column">
                    <p class="notification is-success">First column</p>
                </div>
                <div class="column">
                    <p class="notification is-danger">First column</p>
                </div>
            </div>

            <#if content.data?size == 0>
                <h1>暂无文章</h1>
            </#if>
            <#list content.data as article>
                <div class="articleList box">

                    <div class="media is-hovered m-1 p-2" style="cursor: pointer">
                        <div class="media-content">
                            <div class="content">
                                <h3 style="display: inline;" class="mb-2"
                                    onclick="window.open('/blog/${article.id}','_target')">
                                    <i class="${article.categoryIcon}"></i>${article.title}
                                </h3>
                                <small>@ ${article.createdAt}</small>
                                <br>
                                <p class="m-1">
                                    ${article.description}
                                </p>
                            </div>
                            <nav class="level">
                                <div class="level-left">
                                    <a class="tag is-warning is-light is-medium mb-1 mr-1">
                                        <i class="fa fa-book"></i>
                                        阅读:${article.readCount}
                                    </a>

                                    <a class="tag is-success is-light is-medium mb-1 mr-1">
                                        <i class="fa fa-comment"></i>
                                        评论:${article.commentCount}
                                    </a>

                                    <a class="tag is-warning is-light is-medium mb-1 mr-1"
                                       href="/blog?category=${article.categoryTitle}">
                                        <i class="fa fa-folder-open-o"></i>
                                        ${article.categoryTitle}
                                    </a>

                                    <#list article.tags as tag>
                                        <a class="tag is-link is-light is-medium mb-1 mr-1" href="/blog?tag=${tag}">
                                            <i class="fa fa fa-tag"></i>
                                            ${tag}
                                        </a>
                                    </#list>
                                    <#--                                    <a class="level-item">-->
                                    <#--                                        <span class="icon is-small"><i class="iconfont icon-bazel"></i></span>点赞 0-->
                                    <#--                                    </a>-->
                                </div>
                            </nav>
                        </div>
                        <div class="media-right">
                            <#--                            <button class="delete"></button>-->
                        </div>
                        <#--                        <#if article.avatar?exists>-->
                        <#--                            <figure class="media-right">-->
                        <#--                                <p class="image" >-->
                        <#--                                    <img src="${article.avatar}" alt="${article.title}" style="width: 300px;height: 200px;object-fit: cover;">-->
                        <#--                                </p>-->
                        <#--                            </figure>-->
                        <#--                        </#if>-->
                    </div>
                </div>
            </#list>
            <div id="pageController">
                <a class="button is-outlined <#if content.hasPre>is-info</#if>"
                   <#if content.hasPre>href="${content.prePage}"</#if>>
                    <i class="fa fa-arrow-left "></i>
                    <strong>上一页</strong>
                </a>

                <a class="button  is-outlined <#if content.hasNext>is-info</#if>"
                   <#if content.hasNext>href="${content.nextPage}"</#if>>
                    <strong>下一页</strong>
                    <i class="fa fa-arrow-right" style="margin-left: 10px;margin-right: 0"></i>
                </a>
            </div>
        </div>
        <div class="column">
            <#include "github/recommend.ftl"/>
        </div>
    </div>
</div>

<#-- 尾部 -->
<#include "common/footer.ftl"/>

</body>
</html>